import React, { Component } from 'react';
import { Button, Form, Input, Spin, notification } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'

// 引入自定义组件
import ForgetPasswd from '../ForgetPasswd'
// 引入自定义操作
import { DoLogin, DoLoginSaga } from '../../redux/actions/login'
import { DoRegister } from '../../redux/actions/register'
import { ChangeForgetPasswdActivate } from '../../redux/actions/forgetpasswd'


// 用户登录表单
class NormalLoginForm extends Component {
    onFinish = (values: any) => {
        this.props.DoLoginSaga(values)
        this.props.DoLogin({spinning:true})
        // console.log('Received values of form: ', values);
    };

    // 登录错误的提示
    openNotificationWithIcon = (obj, type='error') => {
      // console.log(obj)
      this.props.DoLogin({
        login_user_error:false, // 用户名错误
        login_passwd_error: false
      })
      notification[type]({
        message: '错误提示',
        description:
          obj.isUsername ? '系统检测该账号不存在,请您检查输入的账号是否正确' : '系统检测用户密码输入错误,请您重新输入密码'
      });
    };

    // 登录成功的提示
    openNotificationWithIconSuccess = (type='success') => {
      notification[type]({
        message: '登录成功',
        description:
          '祝您找到自己的需要'
      });
    };

    // 点击改变注册状态
    handleRegister = () => {
      const obj = {isRegister: true}
      this.props.DoRegister(obj)
      const obj1 = {
        activate: false, 
        email_login: false, 
        spinning: false, // 登录的时候,如果尚未成功会弹出,loading
        login_user_error:false, // 用户名错误
        login_email_error:false, // 用户邮箱登录错误
        login_passwd_error: false
      }
      this.props.DoLogin(obj1)
    }

    // 设置一个钩子函数,页面刷新的时候,进行刷新
    componentDidUpdate() {
      const {LoginState, UserLoginState} = this.props
      let obj = {isUsername: false}
      UserLoginState.isLogin
      ?
      this.openNotificationWithIconSuccess()
      :
        LoginState.login_user_error
        ?
        // 用户名错误
        this.openNotificationWithIcon({...obj, isUsername:true})
        :
          LoginState.login_passwd_error
          ?
          // 密码错误
          this.openNotificationWithIcon(obj)
          :
          console.log()
    }

    render () {
      const {LoginState} = this.props
      return (
        <div>  
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入您的账号' }]}
            >
              <Input 
                  prefix={<UserOutlined className="site-form-item-icon" />} 
                  placeholder="账号" 
                  allowClear={true}   
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入您的密码' }]}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                // allowClear={true}  
              />
            </Form.Item>
            <Spin spinning={LoginState.spinning} tip="登录中......">
              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                  登录
                </Button>
              </Form.Item>
            </Spin>
            <Form.Item className='login_footer'>
              <a onClick={this.handleRegister}>注册新用户</a>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <a className="login-form-forgot" onClick={()=>(
                this.props.ChangeForgetPasswdActivate({activate: true}),
                this.props.DoLogin({activate: false})
              )}>忘记密码</a>
            </Form.Item>
          </Form>
          <ForgetPasswd />
        </div>
      );
    };
  }

  export default connect(
    state => ({
        LoginState: state.LoginReducer.login,
        UserLoginState: state.PublicReducer.userLoginState
      }),
      {
        DoLogin,
        DoLoginSaga,
        DoRegister,
        ChangeForgetPasswdActivate, // 忘记密码，点击出现弹窗
      }
  )(NormalLoginForm)